<template>
  <div class="home-page">
    <div class="banner">
      <div class="container">
        <h1 class="logo-font">conduit</h1>
        <p>A place to share your knowledge.</p>
      </div>
    </div>
    <div class="container page">
      <div class="row">
        <div class="col-md-9">
          <div class="feed-toggle">
            <!-- tab栏 -->
            <ul class="nav nav-pills outline-active">
              <li class="nav-item" @click="tab = 1" v-if="user">
                <nuxt-link class="nav-link" exact :class="{active: tab === 1 }" :to="{name: 'home', query:{ tab: 1} }">Your Feed</nuxt-link>
              </li>
              <li class="nav-item"  @click="tab = 2">
                <nuxt-link class="nav-link" exact :class="{active: tab === 2}" :to="{name: 'home', query:{ tab: 2} }">Global Feed</nuxt-link>
              </li>
              <li class="nav-item"  @click="tab = 3" v-if="tag">
                <nuxt-link class="nav-link" exact :class="{active: tab === 3}" :to="{name: 'home', query:{ tab: 3} }">{{ tag }}</nuxt-link>
              </li>
            </ul>
          </div>
          <!-- 如果没有文章则 -->
          <div class="article-preview" v-if="!articles.length">  No articles are here... yet. </div>
          <!-- 文章列表 -->
          <template v-for="(item, index) in articles">
            <article-item :key='index' :article='item'/>
          </template>
        </div>
        <!-- tags -->
        <div class="col-md-3">
          <div class="sidebar">
            <p>Popular Tags</p>
            <div class="tag-list">
              <template v-for="(item, index) in tags">
                <nuxt-link :key="index" class="tag-pill tag-default" :to="{name: 'home', query: {tag: item, tab: 3, page}}">{{item}}</nuxt-link>
              </template>
            </div>
          </div>
        </div>
        <!-- 分页 -->
        <nav>
          <ul class="pagination">
            <li class="page-item" :class="{ active: item == page }" v-for="item in totalPage" :key="item">
              <nuxt-link class="page-link" :to="{ name: 'home',  query: {  page: item,  tag, tab } }">{{ item }}</nuxt-link>
            </li>
          </ul>
          </nav>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { getArticles, getYourFeedArticles, getTags } from '@/api/article'
import articleItem from './components/articleItem'
export default {
  name: 'home',
  components:{
    articleItem
  },
  data(){
    return{}
  },
  computed: {
    ...mapState('user', { user: 'user'}),
    totalPage() {
      return Math.ceil(this.articlesCount / this.limit)
    }
  },
  watchQuery: ['page', 'tab', 'tag'],
  async asyncData({ query, store }) {
    // 用户信息
    const user = store.state.user.user
    const page = Number.parseInt(query.page || 1)
    const limit = 20
    const tab = +query.tab || (user ? 1 : 2)
    const tag = query.tag
    const loadArticles = tab === 1 ? getYourFeedArticles  : getArticles
    const [articleRes, tagRes] = await Promise.all([
      loadArticles({ limit, offset: (page - 1) * limit, tag }),
      getTags()
    ])
    const { articles, articlesCount } = articleRes
    const { tags } = tagRes
    //文章点赞按钮是否禁用按钮初始化
    articles.forEach(article => article.favoriteDisabled = false)
    return {
      articles, // 文章列表
      articlesCount, // 文章总数
      tags, // 标签列表
      limit, // 每页大小
      page, // 页码
      tab, // 选项卡
      tag // 数据标签
    }
  }
}
</script>